<template>
	<view class="content">
		<view class="mine-bg">
			<view class="bg-avatar">
				<u-avatar :src="src" size="70"></u-avatar>
				<view class="user-name">{{nickName}}</view>
			</view>
		</view>
		<view class="mine-con">
			<view class="con-item" @click="goPage('/pages/myappoint/myappoint')">
				<image :src="$IMG_URL+'history_mine.png'" class="item-img"></image>
				<view class="item-text">挂号历史</view>
			</view>
			<view class="con-item" @click="goPage('/pages/myorder/myorder')">
				<image :src="$IMG_URL+'order_mine.png'" class="item-img"></image>
				<view class="item-text">订单明细</view>
			</view>
			<view class="con-item" @click="goPage('/pages/question/question')">
				<image :src="$IMG_URL+'question_mine.png'" class="item-img"></image>
				<view class="item-text">常见问题</view>
			</view>
		</view>
		<view class="mine-list">
			<view class="list-item" @click="clearData">
				<image :src="$IMG_URL+'cache_mine.png'" class="list-img"></image>
				<view class="list-text">清除缓存</view>
				<view class="list-right">清除缓存</view>
				<image :src="$IMG_URL+'jump.png'" class="list-right-img"></image>
			</view>
			<!-- <u-line color="#E7E7E7"></u-line> -->
			<!-- 	<view class="list-item" style="margin-top: 31rpx;" @click="goYibao">
				<view class="list-text">医保授权</view>
			</view> -->
			<!-- <u-line color="#E7E7E7"></u-line>
			<view class="list-item" style="margin-top: 23rpx;" @click="callPhone">
				<image :src="$IMG_URL+'customerService_mine.png'" class="list-img"></image>
				<view class="list-text">客服电话</view>
				<view class="list-right">0370-6969963</view>
				<image :src="$IMG_URL+'jump.png'" class="list-right-img"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		authinfoApi
	} from "@/api/user"
	export default {
		data() {
			return {
				src: '',
				nickName: '',
				openid: ""
			}
		},
		onShow() {
			// console.log(window.location.href);
			let userInfo = uni.getStorageSync('userInfo')
			console.log(userInfo.nickName);
			this.src = userInfo.avatarUrl
			this.nickName = userInfo.nickName || '游客'
			if (userInfo) {
				this.openid = userInfo.openId
			}
		},
		methods: {
			clearData() {
				uni.showLoading({
					title: '清除中...',
					mask: true
				})
				// #ifdef H5	
				setTimeout(() => {
					uni.removeStorageSync('selectUser')
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					uni.hideLoading()
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
					window.location.href = 'http://sqsl.e0s.cn/#/pages/mine/mine'
				}, 1000)
				// #endif
				// #ifdef MP-ALIPAY
				setTimeout(() => {
					uni.removeStorageSync('selectUser')
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					uni.hideLoading()
					uni.showToast({
						title: '清除成功',
						icon: 'success'
					})
				}, 1000)
				this.src = ''
				this.nickName = '游客'
				// #endif

			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '0370-6969963'
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			goYibao() {
				uni.showLoading({
					mask: true,
					title: '支付中...'
				})
				uni.getAuthCode({
					scopes: ['nhsamp', 'auth_user'],
					success: async (res) => {
						const resa = await authinfoApi({
							authCode: res.authCode
						})
						uni.hideLoading()
						uni.ap.openURL({
							url: encodeURI(resa.data.authUrl)
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		// min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #000000;
		font-size: 23rpx;
	}

	.mine-bg {
		width: 750rpx;
		height: 425rpx;
		background-image: url('#{$IMG_URL}bg_mine.png');
		background-size: 100% 100%;
		padding-top: 106rpx;
		padding-left: 31rpx;
		box-sizing: border-box;
	}

	.bg-avatar {
		display: flex;
		align-items: center;
	}

	.user-name {
		margin-left: 31rpx;
		font-weight: 500;
		color: #333333;
		font-size: 35rpx;
	}

	.mine-con {
		margin: 0 auto;
		margin-top: -127rpx;
		width: 688rpx;
		height: 183rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.con-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item-img {
		width: 77rpx;
		height: 77rpx;
	}

	.item-text {
		margin-top: 8rpx;
	}

	.mine-list {
		margin: 0 auto;
		width: 688rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-top: 23rpx;
		padding: 31rpx;
		padding-right: 19rpx;
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		align-items: center;
	}

	.list-img {
		width: 52rpx;
		height: 52rpx;
	}

	.list-text {
		margin-left: 29rpx;
	}

	.list-right {
		margin-left: auto;
		color: #999999;
		font-size: 19rpx;
	}

	.list-right-img {
		width: 31rpx;
		height: 31rpx;
		margin-left: 15rpx;
	}
</style>